<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加入粉丝团</title>
    <link rel="stylesheet" href="/index/css/common.css?v=2">
    <link rel="stylesheet" href="/index/css/level.css?v=1">
    <link rel="stylesheet" href="/index/css/order.css?v=14">

    <style>

    </style>
</head>

<body>
<div class="tabsBox">
    <div class="topTab">
        <div class="tabLeft">
            <img src="/index/assets/left.png">
        </div>
        <div class="tabCenter">加入粉丝团</div>
        <div class="tabRight"></div>
    </div>
</div>
<p style="clear: both"></p>

<div class="level-list">
    <!--			<img src="/index/assets/vip/vip2.png" alt="" style="width:45%;bottom:26px;">-->
    <!--			<img src="/index/assets/vip/vip3.png" alt="" style="width:45%;bottom:24px;">-->
    {foreach $levels as $k=> $v}
    <!--			<img class="level" level_id="{$v.id}" price="{$v.price}" src="{:config('api.oss_img_path')}{$v.image}" alt=""  {if $k==0} style="width:88%;bottom:20px;" {else} style="width:45%;bottom:25px;"{/if}>-->
    <div class="level-item   {if $k==0}active{/if} " level_id="{$v.id}" price="{$v.price}">
        <p style="margin:10px 0;font-size:16px;">{$v.sales_name}</p>
        <p>直接邀请奖励{$v.commission1}%</p>
        <p>间接邀请奖励{$v.commission2}%</p>
        <p>价格：{$v.price}元</p>
    </div>
    {/foreach}
</div>


<div class="pay-main">
    <div class="pay-type">
        <p style="color:#ff9003">实付金额：¥ <span class="show-money"></span></p>

        <p onclick="otherPay(this)" ><img src="/index/assets/icon/alipay.png?v=2" alt="">

            <span>支付宝支付</span>
            <span class="pay-sel sel-on" pay_type="2">✔</span>
        </p>
        <p  onclick="otherPay(this)"><img src="/index/assets/icon/wxpay.png" alt="">

            <span>微信支付　</span>
            <span class="pay-sel " pay_type="1"></span>

        </p>

        <div class="pay-btn"><button>立即支付</button></div>
    </div>
</div>
<div class="payBtm" style="bottom:50px;">

    <div class="payMoney">￥<span class="show-money"></span></div>
    <div class="lijiPay">立即支付</div>
</div>
{include file='common/menu'}

</body>
{include file='common/toast'}
<script type="text/javascript" src="/index/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/index/js/clipboard.min.js"></script>
<script src="/index/js/common.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>


    $(function(){
        $('.show-money').text($(".active").attr('price'))

    })
    $('.pay-main').click(function () {
        // $(".pay-type").slideUp(100);
        $(".pay-main").hide();
    });

    $('.pay-type').click(function(event){
        event.stopPropagation();

    })



    $('.close').click(function () {
        $('.shuoming').fadeOut(500)
    })

    // var level_id = 0;
    var level_id = $('.level-item').eq(0).attr('level_id');


    $(".level-item").click(function () {
        level_id = $(this).attr('level_id');
        var price = $(this).attr('price');

        $('.pay-money').text(price);

        $(this).addClass('active').siblings().removeClass('active')
    })
    var flag = true;


    //点击会员等级 弹出付款方式
    $('.lijiPay').click(function(){

        // $(this).css('border','1px solid #ff9003').siblings().css('border','none');
        level_id = $('.active').attr('level_id');
        if(isWeiXin()){
            pay(0);
        }else{
            $('.show-money').text($('.active').attr('price'));

            $('.pay-main').show();
        }

    });


    //立即支付
    $('.pay-btn button').click(function(){
        var pay_type = $('.sel-on').attr('pay_type');

        if(pay_type){
            pay(pay_type);
        }else{
            toastFail('请选择支付类型');
        }
    })

   function pay(pay_type) {

        if (flag == false) {
            return;
        }

        flag = false;
        var level = level_id;

        if (level > 0) {

            if (pay_type == 2) {

                location.href =  '{:url("pay/paySalesLevel")}?pay_type=2&level=' + level;

            }

            toast.loading({
                title: "支付中",
//                duration:2000
            })
            $.post('{:url("pay/paySalesLevel")}', {level: level,pay_type:pay_type}, function (res) {

                flag = true;
                toast.hide();
                if (res.code == 1) {
                    if (pay_type == 1) {
                        location.href = res.pay_url
                    }
                    console.log(res.data);
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest',
//						{
//                            "appId":res.data.appid, //公众号名称，由商户传入
//                            "timeStamp":''+res.data.time, //时间戳，自1970年以来的秒数
//                            "nonceStr":res.data.nonce_str, //随机串
//                            "package":"prepay_id="+res.data.prepay_id,   //订单详情扩展字符串
//                            "signType":"MD5", //微信签名方式：
//                            "paySign":res.data.sign //微信签名
//                        },
                        res.data,

                        function (msg) {
                            if (msg.err_msg == "get_brand_wcpay_request:ok") {
                                // 表示已经支付,res.err_msg将在用户支付成功后返回 ok。

//                                if(''){
                                    if(document.referrer==''){
                                        toastSuccess('支付成功', '{:url("mine/index")}');

                                    }else{
                                        toastSuccess('支付成功', document.referrer);
                                    }
//                                }else{
//                                    toastSuccess('支付成功', '{:url("mine/bindPhone")}?url='+ document.referrer);
//
//                                }
                            } else {
                                console.log(msg)
                                toastFail('支付失败');
                            }
                        })
                } else {
                    toastFail(res.msg);
                }
            }, 'json')
        } else {
            toastFail('请选择等级');
        }
    }
    //选择支付方式
    function otherPay(event) {
        // pay(type);
        // event.stopPropagation();
        $('.pay-sel').removeClass('sel-on').text('')
        var obj = $(event).find('.pay-sel');
        if(obj.hasClass('sel-on')){
            obj.removeClass('sel-on').text('');
        }else{
            obj.addClass('sel-on').text('✔').siblings()
        }
    }
</script>
</html>